/**
 * Created by Administrator on 2016/12/10.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    LayoutAnimation,
    UIManager,
    View
} from 'react-native';

class AnimatedDemo2 extends Component {
    // 构造
    constructor(props) {
        super(props);
        this.state = {
            width: 100,
            height: 100
        };
    }

    _onPress1 = ()=> {
        this.setState(
            {
                width: 200,
                height: 200
            }
        );
        let count = 0;
        let self = this;
        while (++count < 50) {
            requestAnimationFrame(()=> {
                self.setState({
                    width: this.state.width + 1,
                    height: this.state.height + 1
                });
            });
        }
    }
    /*http://reactnative.cn/docs/0.20/direct-manipulation.html*/
    _onPress2 = ()=> {
        let count = 0;
        let self = this;
        while (++count < 50) {
            requestAnimationFrame(()=> {
                self.refs.image.setNativeProps({
                    style: {
                        width: self.state.width++,
                        height: self.state.height++
                    }
                });
            });
        }
    }
    _onPress3 = ()=> {
        LayoutAnimation.configureNext({
                duration: 3000, //持续时间
                create: { // 视图创建
                    type: LayoutAnimation.Types.easeInEaseOut,
                    property: LayoutAnimation.Properties.scaleXY,// opacity、scaleXY
                },
                update: { // 视图更新
                    type: LayoutAnimation.Types.easeInEaseOut,
                },
            },
            ()=>{alert("动画结束");} /*android上不执行*/
        );
        this.setState({width: this.state.width + 100, height: this.state.height + 100});
    }

    _onPress4 = ()=> {
        LayoutAnimation.easeInEaseOut();//相当于 LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
        this.setState({width: this.state.width + 100, height: this.state.height + 100});
    }


    render() {
        return (
            <View >
                <Image
                    ref="image"
                    source={{uri: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3921129195,1768171649&fm=27&gp=0.jpg'}}
                    style={{width:this.state.width,height:this.state.height,marginTop:66}}
                    />
                <Text style={styles.text} onPress={this._onPress1}>
                    requestAnimationFrame方式
                </Text>
                <Text style={styles.text} onPress={this._onPress2}>
                    setNativeProps方式
                </Text>
                <Text style={styles.text} onPress={this._onPress3}>
                    LayoutAnimation方式
                </Text>
                <Text style={styles.text} onPress={this._onPress4}>
                    LayoutAnimation2方式
                </Text>
                
            </View>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        fontSize: 20,
        textAlign: 'center',
        borderWidth: 1,
        borderColor: "blue",
        padding: 5,
        margin: 5,
    },
});
export default AnimatedDemo2;
